Hi 大家國慶連假過的好嗎，歡迎回到連假還要早起趕工的記帳程式系列！

昨天將月曆與記帳清單的功能串起來後，今天來修一點這個記帳清單還不夠完整的地方，其中一個地方就是「支出分類」的部分。

支出分類

這邊簡單做直接在根目錄下的 static 資料夾擺上一個靜態檔 typeOptions.json 管理支出的分類：

[
  { "label": "早餐", "value": "breakfast", "icon": "el-icon-burger" },
  { "label": "午餐", "value": "lunch", "icon": "el-icon-tableware" },
  { "label": "晚餐", "value": "dinner", "icon": "el-icon-dish-1" },
  { "label": "飲料", "value": "drink", "icon": "el-icon-cold-drink" },
  { "label": "水果", "value": "fruit", "icon": "el-icon-grape" },
  { "label": "零食", "value": "snack", "icon": "el-icon-potato-strips" },
  { "label": "小酌", "value": "booze", "icon": "el-icon-goblet-square-full" },
  { "label": "衣著", "value": "cloth", "icon": "el-icon-watch" },
  { "label": "租屋", "value": "house", "icon": "el-icon-house" },
  {
    "label": "日常用品",
    "value": "daily-supplies",
    "icon": "el-icon-shopping-bag-1"
  },
  { "label": "交通", "value": "traffic", "icon": "el-icon-truck" },
  { "label": "學習", "value": "learn", "icon": "el-icon-reading" },
  { "label": "娛樂", "value": "entertainment", "icon": "el-icon-service" },
  { "label": "旅遊", "value": "travel", "icon": "el-icon-ship" },
  { "label": "醫療", "value": "medicine", "icon": "el-icon-first-aid-kit" },
  { "label": "其他", "value": "other", "icon": "el-icon-wallet" }
]

什麼！？你說這裡 484 在湊字數呀？
什麼湊字數，這是程式碼的一部分

修改新增紀錄的表單

將原本新增紀錄的表單中的 select 選單下的 option 根據上面這個靜態資料改寫：

<el-select v-model="form.type"
           placeholder="請選擇類別">
  <el-option v-for="option in typeOptions"
             :key="option.value"
             :label="option.label"
             :value="option.value" />
</el-select>

修改記帳清單的對應 icon

將原本的在記帳清單中寫死的 icon class，改用 getIcon 這個 method 根據類別去對應靜態資料中的 icon：

<el-table-column prop="type"
                 label="類別"
                 align="center"
                 width="50"
                 #default="{row}">
  <i :class="getIcon(row.type)"></i>
</el-table-column>

getIcon(type) {
  const item = typeOptions.find(item => {
    if (item.value === type) return item
  })
  return item.icon
},

完成

透過上面幾步的調整，就可以看到記帳清單現在已經可以根據不同類別顯示不同 icon 囉！

今天先做到這，明天再繼續開發～